<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="../assets/images/logo.png">
    <title>文章分类</title>

    <!-- 部署项目要改的地方 -->
    <!-- 引入css：elementUi、bootstrap、bootstrap-icons、normalize统一规范、index -->
    <link rel="stylesheet" href="http://minio.java.itsource.cn/resources/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="http://minio.java.itsource.cn/resources/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://minio.java.itsource.cn/resources/bootstrap-icons/font/bootstrap-icons.min.css">
    <link rel="stylesheet" href="../assets/css/normalize.css">
    <link rel="stylesheet" href="../assets/css/classify.css">

    <!-- 引入JS：vue、elementUI、jQuery、bootstrap -->
    <script src="http://minio.java.itsource.cn/resources/vue/dist/vue.min.js"></script>
    <script src="http://minio.java.itsource.cn/resources/element-ui/lib/index.js"></script>
    <script src="http://minio.java.itsource.cn/resources/jQuery/tmp/jquery.js"></script>
    <script src="http://minio.java.itsource.cn/resources/bootstrap/dist/js/bootstrap.bundle.js"></script>
    <!-- 引入http-vue-loader：html页面中引入VUE组件需要的包 -->
    <!-- <script src="https://unpkg.com/http-vue-loader"></script> -->
    <script src="http://minio.java.itsource.cn/resources/http-vue-loader/src/httpVueLoader.js"></script>
    <script src="http://minio.java.itsource.cn/resources/axios/dist/axios.min.js"></script>
    <script src="../assets/js/common.js"></script>

    <!-- 引入css：elementUi、bootstrap、bootstrap-icons、normalize统一规范、index -->
    <!--     <link rel="stylesheet" href="../node_modules/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../node_modules/bootstrap-icons/font/bootstrap-icons.min.css">
    <link rel="stylesheet" href="../assets/css/normalize.css">
    <link rel="stylesheet" href="../assets/css/classify.css"> -->

    <!-- 引入JS：vue、elementUI、jQuery、bootstrap -->
    <!--     <script src="../node_modules/vue/dist/vue.min.js"></script>
    <script src="../node_modules/element-ui/lib/index.js"></script>
    <script src="../node_modules/jQuery/tmp/jquery.js"></script>
    <script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script> -->
    <!-- 引入http-vue-loader：html页面中引入VUE组件需要的包 -->
    <!--     <script src="../node_modules/http-vue-loader/src/httpVueLoader.js"></script>
    <script src="../node_modules/axios/dist/axios.min.js"></script>
    <script src="../assets/js/common.js"></script> -->

</head>

<body>
    <div id="app">
        <!-- 引入头部组件 -->
        <my-header></my-header>

        <section style="margin-top: 80px">
            <div class="container">
                <a href="#">
                    <img src="../../assets/images/see.jpg" width="100%" alt="" />
                </a>
            </div>
        </section>

        <section class="mt-3">
            <div class="container">
                <div class="card" style="background-color: white;">
                    <div class="card-body">
                        <div class="text-center">
                            <h2 class="my-3">{{articleTypeName}}</h2>
                            <div class="list-group list-group-numbered text-start list-group-flush fs-5"
                                v-for="(a,index) in articles">
                                <a :href="'blog-detail.html?'+a.id" class="text-info article"
                                    style="border: none;">{{index + 1}}.&nbsp;{{a.articleName}}</a>
                            </div>
                        </div>
                        <hr class="my-4" />
                        <div>
                            <!-- my-3【上下外边距1rem】，ps-1【左内边距0.25rem】，pe-4【右内边距1.5rem】，
                        d-flex【开启弹性布局】，justify-content-between【主轴方向两端对齐】 -->
                            <div class="my-3 ps-1 pe-4 d-flex justify-content-between">
                                <p>转载声明：本博客由波波老师创作。可自由转载、引用，
                                    但需署名作者且注明文章出处。如转载至微信公众号，请在文末添加作者微信二维码。
                                </p>
                                <img src="../../assets/images/CSDN.png" alt="" width="150px" height="130px" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <script>
        new Vue({
            el: "#app",
            // 数据
            data() {
                return {
                    // 文章类型数据
                    articleTypeId: null, // 文章类型id
                    articleTypeName: '', // 文章类型名称
                    // 文章数据
                    articles: [],


                }
            },
            // 方法
            methods: {
                // 根据文章类型id查询所有文章
                getArticlesByTypeId() {
                    this.$http.get("/article/getArticlesByTypeId/" + this.articleTypeId).then(res => {
                        // 给文章数据赋值
                        this.articles = res.data;
                        // 获取文章类型名称
                        this.articleTypeName = this.articles[0].articleTypeName;
                    })
                }

            },
            // 组件
            components: {
                // 将组建加入组建库
                'my-header': httpVueLoader('./common/header.vue')
            },
            // 钩子函数
            mounted() {
                // 获取文章类型id
                let UrlId = location.href.substring(location.href.lastIndexOf("?") + 1);
                // 给文章类型id赋值
                this.articleTypeId = UrlId;
                // 根据文章类型id查询所有文章
                this.getArticlesByTypeId();
            },
        })
    </script>

</body>

</html>